<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <link href="/static/element-ui/theme-chalk/index.css" rel="stylesheet">
    <link href="/static/css/main.css" rel="stylesheet">
    <link rel="icon" type="image/x-icon" href="/static/img/favicon.png">
    <link rel="shortcut icon" type="image/x-icon" href="/static/img/favicon.png">
</head>
<body>
    <div id="app">
        <el-container>
            <el-header>
                <el-row>
                    <el-col :span="12">
                        <el-menu class="el-menu-demo" mode="horizontal">
                            <el-menu-item index="1"><a href="/"><img src="" height="100%"></a></el-menu-item>
                            <el-menu-item index="2">数据标注平台</el-menu-item>
                        </el-menu>
                    </el-col>
                    <el-col :sm="{span: 6, offset: 6}" :md="{span: 4, offset: 8}">
                        <span style="line-height:60px;font-size:15px">还没账号？</span>
                        <a href="/register"><el-button size="medium">注册</el-button></a>
                    </el-col>
                </el-row>
            </el-header>
            
            <el-main>
                <el-row>
                    <el-col :md="{span: 18, offset: 3}" :lg="{span: 12, offset: 6}">
                        <el-card class="box-card" style="margin-bottom: 20px">
                            <div slot="header" class="clearfix" align="center">
                                <span style="font-size: 1.5rem;">登录泛函标注平台</span>
                            </div>
                            <el-row>
                                <el-col :span="10" :offset="7">
                                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                                        <el-form-item prop="username">
                                            <el-input v-model="ruleForm.username" placeholder="用户名/邮箱"></el-input>
                                        </el-form-item>
                                        <el-form-item prop="password">
                                            <el-input type="password" v-model="ruleForm.password" placeholder="请输入密码"></el-input>
                                        </el-form-item>
                                        <el-form-item>
                                            <el-checkbox v-model="ruleForm.remember" label="记住我"></el-checkbox>
                                        </el-form-item>
                                        <el-form-item>
                                            <el-button @click="login('ruleForm')" type="primary" style="width:100%;">登录</el-button>
                                        </el-form-item>
                                    </el-form>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>
                </el-row>
            </el-main>
            {{<template "footer.html" .>}}
        </el-container>
    </div>
</body>
    <!-- 先引入 Vue -->
    <script src="/static/vue/vue.min.js"></script>
    <!-- 引入组件库 -->
    <script src="/static/element-ui/index.js"></script>
    <!-- 引入axios异步通信库 -->
    <script src="/static/axios/axios.min.js"></script>
    <script>
        vm = new Vue({
            el: '#app',
            data: {
                ruleForm: {
                    username: '',
                    password: '',
                    remember: true,
                },
                rules: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 3, message: '用户名至少为 3 位字符', trigger: 'blur' },
                        { max: 33, message: '用户名最多为 33 位字符', trigger: 'blur'},
                        { type: 'string', message: '用户名不正确', trigger: 'blur', pattern: /^[a-zA-Z0-9_-]+$/,},
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { type: 'string', min: 6, message: '密码长度至少6位', trigger: 'blur'},
                    ],
                },
            },
            methods: {
                login: function(ruleForm) {
                    console.log(ruleForm)
                    this.$refs[ruleForm].validate((valid) => {
                        if (!valid) {
                            return false;
                        }
                        axios.post('/login', {
                            username: vm.ruleForm.username,
                            password: vm.ruleForm.password
                        })
                        .then(function (response) {
                            var rsp = response.data
                            if(rsp.code === 0){
                                vm.$notify.success({
                                    title: '成功',
                                    message: rsp.message
                                });
                                // 延时500ms跳转
                                setTimeout("window.location.href='/projects'", 500);
                            } else {
                                vm.$notify.error({
                                    title: '失败',
                                    message: rsp.message
                                });
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                    });
                }
            }
        })
    </script>
</html>